<template>
    <div class="tab-bar-root">
        <div id="one">
            <div class="sss">
                <div class="fa fa-github-alt pic"></div>
                <div class="text">客服</div>
            </div>
            <div class="sss">
                <div class="fa fa-shopping-cart pic"></div>
                <div class="text">购物车</div>
            </div>
        </div>
        <div id="two">立即购买</div>
        <div id="three" @click="btnClick">加入购物车</div>
    </div>
</template>
<script>
export default {
    props:["data1"],
    methods:{
        btnClick: function () {
            // console.log(this.data1)
                var logObj = {
                    _id: this.data1,
                }
                this.$store.dispatch("requestAdd", logObj)
                    .then(res => {
                        // console.dir(res.data);
                        this.layer.alert(res.data.msg);
                    });
            }
    }
}
</script>
<style scoped>
.tab-bar-root {
    height: 57px;
    display: flex;
    border-top: solid 1px black;
}
#one{
    width: 60vw;
    display: flex;
    justify-content: space-around;
    background-color: white;
}
#two{
    width: 30vw;
    line-height: 57px;
    background-color: #fe7646;
    font-size: 14px;
    color: white;
    text-align: center;
    cursor: pointer;
}
#three{
    width: 30vw;
    line-height: 57px;
    background-color: orangered;
    font-size: 14px;
    color: white;
    text-align: center;
}
.text{
    font-size: 12px;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
.pic{
    margin-top: 4px;
    font-size: 24px;
    color: orangered;
}
.sss{
    margin-top: 5px;
}
</style>